<template>
	<view class="">
	<u-navbar placeholder @leftClick="jumpPage('/pages/form/form')" title="订单信息"> </u-navbar>	
	<!--startprint-->
		<view class="data_list" id="printDiv">
			<view class="title"  v-show="!state.showPrint">成功物流收货凭证</view>
			<view class="data_item  " :class="state.showPrint?'':'btline'  ">
				<view  v-show="!state.showPrint" class="label">订单货号</view>
			</view>
			
			<view  class="title title2">{{state.orderInfo.order_sn}}</view>
			
			
			<view class="data_item" >
				<view class="label">收货人姓名</view>
				<view class="value">{{state.orderInfo.receiver_name}}</view>
			</view>
			
			<view class="data_item" >
				<view class="label">收货人电话</view>
				<view class="value">{{state.orderInfo.receiver_mobile}}</view>
			</view>
			
			<view class="data_item" >
				<view class="label">收货人地址</view>
				<view class="value">{{state.orderInfo.receiver_province_name}}  {{state.orderInfo.receiver_city_name}}  {{state.orderInfo.receiver_county_name}} {{state.orderInfo.receiver_address}}</view>
			</view>
			
			
			<view class="data_item"  v-show="!state.showPrint">
				<view class="label">货物件数</view>
				<view v-show="state.showPrint" class="value">{{state.orderInfo.nums}} 件</view>
			</view>
			
			<view style="position: relative;"  :class="state.showPrint?'':'bbline'  " v-show="!state.showPrint" class="title title2">
				{{state.orderInfo.nums}} 件
				<view class="poab">{{state.time}}</view>
			</view>
			
			
			<view class="data_item" v-show="state.showPrint">
				<view class="label">货物重量</view>
				<view class="value">{{state.orderInfo.weight}} kg</view>
			</view>
			
			<view class="data_item" v-show="state.showPrint">
				<view class="label">总运费</view>
				<view class="value">{{state.orderInfo.total_amount}} 元</view>
			</view>
			
			<view class="data_item" v-show="state.showPrint">
				<view class="label">成功运费</view>
				<view class="value">{{state.orderInfo.success_amount}} 元</view>
			</view>
			
			<view class="data_item " :class="state.showPrint?'':'bbline'  "  v-show="state.showPrint" >
				<view class="label">付款方式</view>
				<view class="value">{{state.orderInfo.payment_way == 1 ? '到付' : '现付'}}</view>
			</view>
			
		

		</view>
		<!--endprint-->

				<u-button @click="cahngePrintContent"  v-print="printContent" style="margin-top: 50px;" type="primary">打印</u-button>
				
				<u-button @click="changeInfo"  style="margin-top: 30px;" type="primary">修改信息</u-button>

	</view>
</template>

<script setup>
	import { reactive, ref, computed, onMounted} from 'vue';
	import { useStore } from 'vuex';
	import { jumpPage } from '@/common/hooks.js'
	import { searchUserApi ,orderDetailApi } from '@/common/apis.js'
	import { onLoad } from "@dcloudio/uni-app";
	const store = reactive(useStore())
	const state = reactive({
		orderInfo:{},
		order_id:"",
		time:"",
		showPrint:true,
	})






	onLoad((optios) => {
		getTime()
			state.order_id = optios.id
			getOrderInfo(optios.id)
	})

const getTime =() =>{
	
	const now = new Date();
	const year = now.getFullYear();
	let month = now.getMonth() + 1;
	if (month<10) {
		month ='0'+month
	}
	let  day = now.getDate();
	if (day<10) {
		day ='0'+day
	}
	let hours = now.getHours();
	if (hours<10) {
		hours ='0'+hours
	}
	const minutes = now.getMinutes();
	
	if (minutes<10) {
		minutes ='0'+minutes
	}
	state.time =   year + '-' + month + '-' + day + ' ' + hours +':' + minutes
	
}

const printContent = reactive({
	id: 'printDiv',
	// preview: true, // 预览工具是否启用
	// previewTitle: '储能服务费结算单', // 预览页面的标题
	// popTitle: '储能服务费结算单', // 打印页面的页眉
	extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
	extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
	previewBeforeOpenCallback () {
	  console.log('正在加载预览窗口')
	},
	previewOpenCallback () {
	  console.log('已经加载完预览窗口')
	},
	beforeOpenCallback (vue) {
	  vue.printLoading = true
	  console.log('打开之前')
	},
	openCallback (vue) {
	  vue.printLoading = false
	  console.log('执行了打印')
	},
	closeCallback () {
		state.showPrint = true
	  console.log('关闭了打印工具')
	},
	clickMounted (vue) {
	  console.log('点击了打印按钮')
	  // vue.printSet.popTitle = vue.tableHead // 动态设置页眉
	}
})


const cahngePrintContent = () =>{
	state.showPrint = false
}

	const getOrderInfo = async (id) =>{
		let reqdata = {
			params:{id}
		}
		const {data:res} =await  orderDetailApi(reqdata)
		if (res.code ==200) {
			state.orderInfo = res.data
		}
	}


const changeInfo= () =>{
	jumpPage(`/pages/form/form?id=${state.order_id}`)
}



</script>

<style lang='scss' scoped>
	page {
		background-color: #F4F3F3;
		padding: 15px;
	}

@page {
    size: auto;
    margin: 0mm;
  }
  
  .poab {
	  position: absolute;
	  right: 30px;
	  bottom: -60px;
	  font-size: 16px;
  }


	.data_list {
		background-color: #FFF;
		margin-top: 15px;
		padding: 10px;
		border-radius: 5px;
		font-weight: 600;

	.title {
			font-weight: 700;
			text-align: center;
			font-size: 22px;
			margin-bottom: 20px;
		}
		.title2 {
			font-size: 26px;
		}

		.data_item {
			margin-bottom: 15px;
			display: flex;
			font-size: 14px;
			.label {
				margin-right: 10px;
				width: 90px;
				margin-left: 40px;
				flex-shrink: 0;
			}
		}
	}
	
	.btline {
		border-top: 2px dashed #000;
		padding-top: 30px;
	}
	.bbline {
		border-bottom: 2px dashed #000;
		padding-bottom: 30px;
	}
</style>